<!--员工档案-->
<template>

  <!--标题-->
  <div style="padding: 10px;height: 3vh;background-color: #fff" >
    <el-row>
      <span style="font-size: 20px;font-weight: bold;" >员工档案</span>
    </el-row>
  </div>

  <!--弹窗相关-->
  <!--编辑弹窗-->
  <!--新增员工弹窗-->

  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisibleAdd"
      width="80%">
    <div>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名:" prop="name">
              <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                        placeholder="请输入员工姓名" v-model="saveEmployeeArr.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别:" prop="gender">
              <el-radio-group v-model="saveEmployeeArr.gender">
                <el-radio label="男" value="1">男</el-radio>
                <el-radio label="女" value="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthday">
              <el-date-picker
                  v-model="saveEmployeeArr.birthday"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 150px;"
                  placeholder="出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="政治面貌:" prop="politicId">
              <el-input placeholder="政治面貌" size="mini" style="width: 200px;"
                        v-model="saveEmployeeArr.politicsStatus"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="民族:" prop="nationId">
              <el-input placeholder="民族" size="mini" style="width: 150px;"
                        v-model="saveEmployeeArr.nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="籍贯:" prop="nativePlace">
              <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                        placeholder="请输入籍贯" v-model="saveEmployeeArr.province"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input size="mini" style="width: 150px" prefix-icon="el-icon-message"
                        placeholder="请输入电子邮箱" v-model="saveEmployeeArr.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系地址:" prop="address">
              <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                        placeholder="请输入联系地址" v-model="saveEmployeeArr.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职位:" prop="posId">
              <el-input placeholder="职位" size="mini" style="width: 150px;"
                        v-model="saveEmployeeArr.position"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职称:" prop="jobLevelId">
              <el-input placeholder="职称" size="mini" style="width: 150px;"
                        v-model="saveEmployeeArr.jobLevel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departmentId">
<!--              <el-popover-->
<!--                  placement="right"-->
<!--                  title="请选择部门"-->
<!--                  width="200"-->
<!--                  trigger="manual"-->
<!--                  >-->
<!--                <el-tree default-expand-all :data="allDeps" :props="defaultProps" :expand-on-click-node="false"-->
<!--                         @node-click="handleNodeClick"></el-tree>-->
<!--                <div slot="reference"-->
<!--                     style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"-->
<!--                     @click="showDepView">{{inputDepName}}-->
<!--                </div>-->
<!--              </el-popover>-->
              <el-input placeholder="部门" size="mini" style="width: 150px;"
                        v-model="saveEmployeeArr.department"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电话号码:" prop="phone">
              <el-input size="mini" style="width: 200px" prefix-icon="el-icon-phone"
                        placeholder="电话号码" v-model="saveEmployeeArr.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="学历:" prop="tiptopDegree">
              <el-select placeholder="学历" size="mini"
                         style="width: 150px;" v-model="saveEmployeeArr.tiptopDegree">
                <el-option
                    v-for="item in tiptopDegrees"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业院校:" prop="school">
              <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                        placeholder="毕业院校名称" v-model="saveEmployeeArr.school"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="专业名称:" prop="specialty">
              <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                        placeholder="请输入专业名称" v-model="saveEmployeeArr.specialty"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="入职日期:" prop="beginDate">
              <el-date-picker
                  v-model="saveEmployeeArr.beginDate"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="入职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同起始日期:" prop="beginContract">
              <el-date-picker
                  v-model="saveEmployeeArr.beginContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="合同起始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同终止日期:" prop="endContract">
              <el-date-picker
                  v-model="saveEmployeeArr.endContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 150px;"
                  placeholder="合同终止日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证号码:" prop="idCard">
              <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit"
                        placeholder="请输入身份证号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="聘用形式:" prop="engageForm">
              <el-radio-group v-model="saveEmployeeArr.engageForm">
                <el-radio label="劳动合同">劳动合同</el-radio>
                <el-radio label="劳务合同">劳务合同</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况:" prop="wedlock">
              <el-radio-group v-model="saveEmployeeArr.wedlockId">
                <el-radio label="已婚" value="1">已婚</el-radio>
                <el-radio label="未婚" value="2">未婚</el-radio>
                <el-radio label="离异" value="3">离异</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="saveEmployee">保 存</el-button>
  </span>
  </el-dialog>

  <!--批量导出弹窗-->
  <el-dialog title="导出资产信息为excel表格--数据预览" v-model="dialogExcelVisible"
             :before-close="exportClose" width="80%">
    <el-table
        :data="selectData"
        stripe
        border
        v-loading="loading"
        element-loading-text="正在加载..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%" id="selectTable">
      <el-table-column
          type="index"
          align="left"
          label="序号"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          fixed
          align="left"
          label="姓名"
          width="90">
      </el-table-column>
      <el-table-column
          prop="workID"
          label="工号"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          align="left"
          width="55">
      </el-table-column>
      <el-table-column
          prop="birthday"
          width="95"
          align="left"
          label="出生日期">
      </el-table-column>
      <el-table-column
          prop="idCard"
          width="150"
          align="left"
          label="身份证号码">
      </el-table-column>
      <el-table-column
          prop="wedlock"
          width="90"
          label="婚姻状况">
      </el-table-column>
      <el-table-column
          prop="nation.name"
          width="50"
          label="民族">
      </el-table-column>
      <el-table-column
          prop="nativePlace"
          width="80"
          label="籍贯">
      </el-table-column>
      <el-table-column
          prop="politicsstatus.name"
          label="政治面貌">
      </el-table-column>
      <el-table-column
          prop="email"
          width="180"
          align="left"
          label="电子邮件">
      </el-table-column>
      <el-table-column
          prop="phone"
          width="120"
          align="left"
          label="电话号码">
      </el-table-column>
      <el-table-column
          prop="address"
          width="220"
          align="left"
          label="联系地址">
      </el-table-column>
      <el-table-column
          prop="department.name"
          width="100"
          align="left"
          label="所属部门">
      </el-table-column>
      <el-table-column
          prop="position.name"
          width="100"
          label="职位">
      </el-table-column>
      <el-table-column
          prop="jobLevel.name"
          width="100"
          label="职称">
      </el-table-column>
      <el-table-column
          prop="engageForm"
          width="100"
          align="left"
          label="聘用形式">
      </el-table-column>
      <el-table-column
          prop="tiptopDegree"
          width="80"
          align="left"
          label="最高学历">
      </el-table-column>
      <el-table-column
          prop="specialty"
          width="150"
          align="left"
          label="专业">
      </el-table-column>
      <el-table-column
          prop="school"
          width="150"
          align="left"
          label="毕业院校">
      </el-table-column>
      <el-table-column
          prop="beginDate"
          width="120"
          align="left"
          label="入职日期">
      </el-table-column>
      <el-table-column
          prop="conversionTime"
          width="120"
          align="left"
          label="转正日期">
      </el-table-column>
      <el-table-column
          prop="beginContract"
          width="120"
          align="left"
          label="合同起始日期">
      </el-table-column>
      <el-table-column
          prop="endContract"
          width="120"
          align="left"
          label="合同截止日期">
      </el-table-column>
      <el-table-column
          width="100"
          align="left"
          label="合同期限">
        <!--        <template slot-scope="scope">-->
        <!--          <el-tag>{{scope.row.contractTerm}}</el-tag>-->
        <!--          年-->
        <!--        </template>-->
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button @click="dialogExcelVisible = false">取 消</el-button>
    </template>
  </el-dialog>


  <!--批量导入弹窗-->
<el-dialog v-model="dialogVisibleMuti" :title="dialogTitle"
           style="width: 600px;padding: 30px;">
<!--  <el-form label-position="top">-->
<!--    <el-row>-->
<!--      <el-col :span="24">-->
<!--        <el-card>-->
<!--          <el-form-item label="点击图片上传员工列表:">-->
<!--            <div>-->
<!--              &lt;!&ndash;-->
<!--                      action: 必填参数，上传的地址-->
<!--                      :auto-upload: 在选取文件后立即进行上传-->
<!--                      :show-file-list: 是否显示已上传文件列表&ndash;&gt;-->
<!--              <el-upload-->
<!--                  action-->
<!--                  accept=".xlsx, .xls"-->
<!--                  :auto-upload="false"-->
<!--                  :show-file-list="false"-->
<!--                  :on-change="handle"-->
<!--              >-->
<!--                <el-button type="primary" slot="trigger">选取EXCEL文件</el-button>-->
<!--              </el-upload>-->

<!--              <el-button type="success" @click="submit">提交</el-button>-->
<!--              <el-button-group style="float: right;padding: 10px;">-->
<!--                <el-button>下载员工导入模板</el-button>-->
<!--                <el-button @click="handleClose">取消</el-button>-->
<!--              </el-button-group>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--  </el-form>-->
  <div class="modal">
    <div class="modal-header">
      <div class="modal-logo">
      <span class="logo-circle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="25"
            height="25"
            viewBox="0 0 512 419.116"
        >
          <defs>
            <clipPath id="clip-folder-new">
              <rect width="512" height="419.116"></rect>
            </clipPath>
          </defs>
          <g id="folder-new" clip-path="url(#clip-folder-new)">
            <path
                id="Union_1"
                data-name="Union 1"
                d="M16.991,419.116A16.989,16.989,0,0,1,0,402.125V16.991A16.989,16.989,0,0,1,16.991,0H146.124a17,17,0,0,1,10.342,3.513L227.217,57.77H437.805A16.989,16.989,0,0,1,454.8,74.761v53.244h40.213A16.992,16.992,0,0,1,511.6,148.657L454.966,405.222a17,17,0,0,1-16.6,13.332H410.053v.562ZM63.06,384.573H424.722L473.86,161.988H112.2Z"
                fill="var(--c-action-primary)"
                stroke=""
                stroke-width="1"
            ></path>
          </g>
        </svg>
      </span>
      </div>
      <button class="btn-close">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
        >
          <path fill="none" d="M0 0h24v24H0V0z"></path>
          <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
              fill="var(--c-text-secondary)"
          ></path>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p class="modal-title">Upload a file</p>
      <p class="modal-description">Attach the file below</p>
      <button class="upload-area">
      <span class="upload-area-icon">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="35"
            height="35"
            viewBox="0 0 340.531 419.116"
        >
          <g id="files-new" clip-path="url(#clip-files-new)">
            <path
                id="Union_2"
                data-name="Union 2"
                d="M-2904.708-8.885A39.292,39.292,0,0,1-2944-48.177V-388.708A39.292,39.292,0,0,1-2904.708-428h209.558a13.1,13.1,0,0,1,9.3,3.8l78.584,78.584a13.1,13.1,0,0,1,3.8,9.3V-48.177a39.292,39.292,0,0,1-39.292,39.292Zm-13.1-379.823V-48.177a13.1,13.1,0,0,0,13.1,13.1h261.947a13.1,13.1,0,0,0,13.1-13.1V-323.221h-52.39a26.2,26.2,0,0,1-26.194-26.195v-52.39h-196.46A13.1,13.1,0,0,0-2917.805-388.708Zm146.5,241.621a14.269,14.269,0,0,1-7.883-12.758v-19.113h-68.841c-7.869,0-7.87-47.619,0-47.619h68.842v-18.8a14.271,14.271,0,0,1,7.882-12.758,14.239,14.239,0,0,1,14.925,1.354l57.019,42.764c.242.185.328.485.555.671a13.9,13.9,0,0,1,2.751,3.292,14.57,14.57,0,0,1,.984,1.454,14.114,14.114,0,0,1,1.411,5.987,14.006,14.006,0,0,1-1.411,5.973,14.653,14.653,0,0,1-.984,1.468,13.9,13.9,0,0,1-2.751,3.293c-.228.2-.313.485-.555.671l-57.019,42.764a14.26,14.26,0,0,1-8.558,2.847A14.326,14.326,0,0,1-2771.3-147.087Z"
                transform="translate(2944 428)"
                fill="var(--c-action-primary)"
            ></path>
          </g>
        </svg>
      </span>
        <span class="upload-area-title">Drag file(s) here to upload.</span>
        <span class="upload-area-description">
        Alternatively, you can select a file by <br /><strong
        >clicking here</strong
        >
      </span>
      </button>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary">Cancel</button>
      <button class="btn-primary">Upload File</button>
    </div>
  </div>

</el-dialog>

  <!--搜索框-->
  <div style="background-color: #fff;height: 4.5vh;">
    <el-row :gutter="20" style="margin-bottom: 5px">
      <el-col :span="0.5">

      </el-col>
      <el-col :span="6">
        <el-form-item label="姓名:">
          <el-input placeholder="请输入姓名" label="姓名:" v-model="searchArr.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="手机:">
          <el-input placeholder="请输入手机号" label="手机:" v-model="searchArr.phone"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="部门:">
          <el-select placeholder="请选择部门" label="部门:" v-model="searchArr.department"></el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-button type="info" @click="loadEmployee">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="text">高级检索</el-button>
      </el-col>
    </el-row>
  </div>

  <!--主要内容-->
  <el-card style="margin-top: 15px">
    <el-row style="margin: 10px;">

      <el-col white-space="nowrap" :gutter="10" :span="24">
        <el-button type="info" @click="beforeAddEmployee">新增员工</el-button>
        <el-button type="info" @click="mutiAddEmployee">批量导入</el-button>

        <el-dropdown trigger="click" style="margin-left: 10px;">
          <el-button :icon="ArrowRight">更多操作</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="exportExcelSelect">导出</el-dropdown-item>
              <el-dropdown-item @click="">批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

    <!--表格展示信息-->
    <el-table
        :data="employeeArr"
        @selection-change="handleSelectionChange"
        stripe
        border
        v-loading="loading"
        element-loading-text="正在加载..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="40">
      </el-table-column>
      <el-table-column
          type="index"
          align="left"
          label="序号"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          fixed
          align="left"
          label="姓名"
          width="90">
      </el-table-column>
      <el-table-column
          prop="workID"
          label="工号"
          align="left"
          width="90">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          align="left"
          width="55">
      </el-table-column>
      <el-table-column
          prop="birthday"
          width="95"
          align="left"
          label="出生日期">
      </el-table-column>
      <el-table-column
          prop="idCard"
          width="150"
          align="left"
          label="身份证号码">
      </el-table-column>
      <el-table-column
          prop="wedlock"
          width="90"
          label="婚姻状况">
      </el-table-column>
      <el-table-column
          prop="nation.name"
          width="50"
          label="民族">
      </el-table-column>
      <el-table-column
          prop="nativePlace"
          width="80"
          label="籍贯">
      </el-table-column>
      <el-table-column
          prop="politicsstatus.name"
          label="政治面貌">
      </el-table-column>
      <el-table-column
          prop="email"
          width="180"
          align="left"
          label="电子邮件">
      </el-table-column>
      <el-table-column
          prop="phone"
          width="120"
          align="left"
          label="电话号码">
      </el-table-column>
      <el-table-column
          prop="address"
          width="220"
          align="left"
          label="联系地址">
      </el-table-column>
      <el-table-column
          prop="department.name"
          width="100"
          align="left"
          label="所属部门">
      </el-table-column>
      <el-table-column
          prop="position.name"
          width="100"
          label="职位">
      </el-table-column>
      <el-table-column
          prop="jobLevel.name"
          width="100"
          label="职称">
      </el-table-column>
      <el-table-column
          prop="engageForm"
          width="100"
          align="left"
          label="聘用形式">
      </el-table-column>
      <el-table-column
          prop="tiptopDegree"
          width="80"
          align="left"
          label="最高学历">
      </el-table-column>
      <el-table-column
          prop="specialty"
          width="150"
          align="left"
          label="专业">
      </el-table-column>
      <el-table-column
          prop="school"
          width="150"
          align="left"
          label="毕业院校">
      </el-table-column>
      <el-table-column
          prop="beginDate"
          width="120"
          align="left"
          label="入职日期">
      </el-table-column>
      <el-table-column
          prop="conversionTime"
          width="120"
          align="left"
          label="转正日期">
      </el-table-column>
      <el-table-column
          prop="beginContract"
          width="120"
          align="left"
          label="合同起始日期">
      </el-table-column>
      <el-table-column
          prop="endContract"
          width="120"
          align="left"
          label="合同截止日期">
      </el-table-column>
      <el-table-column
          width="100"
          align="left"
          label="合同期限">
<!--        <template slot-scope="scope">-->
<!--          <el-tag>{{scope.row.contractTerm}}</el-tag>-->
<!--          年-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          fixed="right"
          width="200"
          label="操作">
          <el-button-group class="ml-4">
            <el-button type="warning" :icon="Edit" @click="editEmployeeById"/>
            <el-button :icon="Share" />
            <el-button type="danger" :icon="Delete" />
          </el-button-group>
<!--        </template>-->
      </el-table-column>
    </el-table>
    <div style="margin:30px;float: right;">
      <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
       :pager-count="4" 表示显示4个页码
       :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
       current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
       :total="400" 表示总条数，需要双向绑定
       @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
       @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>




</template>

<script setup>
import {ref,onMounted} from "vue";
import htmlToExcel from "@/utils/htmlToExcel";
import {ElMessage} from "element-plus";
import axios from"/src/api/axios";
import qs from "qs";

onMounted(()=>{
  loadEmployee();
  // initData();
  // initPositions();
})

//导出数组
const selectData=ref([]);
//控制导出数据弹窗
const dialogExcelVisible=ref(false);
//点击<确定导出>按钮触发的方法
const exportExcel=()=>{

  htmlToExcel.getExcel('#selectTable','导出员工档案');
  dialogExcelVisible.value=false;
};
const exportClose=()=>{
  if(confirm('确定关闭本弹窗吗？')){
    dialogExcelVisible.value=false;
  }
}
//点击搜索栏的<导出>按钮触发的方法
const exportExcelSelect=()=>{
  if (selectData.value.length<1){
    ElMessage.warning('请选择要导出的内容！');
    return false;
  }
  dialogExcelVisible.value=true;
};
const handleSelectionChange=(val)=>{
  selectData.value=val;
};


//是否显示加载状态
const loading = ref(false);
//按钮样式
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue';



/**
 * 员工信息存储数组
 * @type
 */
// let employeeArr = [//暂时
//   {
//
//   },
//   {
//     name: "张三丰",
//     gender: "男",
//     birthday: "1989-12-31",
//     idCard: "510122198012311255",
//     wedlock: "未婚",
//     nationId: 1,
//     nativePlace: "重庆",
//     politicId: 12,
//     email: "wudang@qq.com",
//     phone: "12345678910",
//     address: "深圳市南山区",
//     departmentId: null,
//     jobLevelId: 9,
//     posId: 29,
//     engageForm: "劳动合同",
//     tiptopDegree: "大专",
//     specialty: "计算机",
//     school: "深圳大学",
//     beginDate: "2017-12-31",
//     workState: "在职",
//     workID: "00000057",
//     contractTerm: 2,
//     conversionTime: "2018-03-31",
//     notworkDate: null,
//     beginContract: "2017-12-31",
//     endContract: "2019-12-31",
//     workAge: null
//   },
// ];
const employeeArr = ref([]);

//新增员工列表
const saveEmployeeArr = ref({
  id:"",
  name:"",
  phone:"",
  gender:"",
  birthday:"",
  province:"",
  address:"",
  status:"",
  idCard:"",
  idCardFacadeFileId:"",
  idCardBackFileId:"",
  diplomaFileId:"",
  tiptopDegree:"",
  school:"",
  specialty:"",
  createTime:"",
  updateTime:"",
  deleteTime:"",
  politicsStatus:"",
  email:"",
  wedlockId:"",
  nation:"",
  beginDate:"",
  beginContract:"",
  endContract:"",
  engageForm:"",
  department:"",
  position:"",
  jobLevel:"",
})
//搜索参数列表
const searchArr = ref(
  {
    name: '',
    phone:'',
    department:''
  }
)



//重置搜索框
const resetSearch = () => {
  searchArr.value={};
  loadEmployee();
}

/**
 * 弹窗控制
 * @type {Ref<UnwrapRef<boolean>>}
 */
//控制新增员工弹窗是否显示
const dialogVisibleAdd = ref(false);
//控制批量导入弹窗是否显示
const dialogVisibleMuti = ref(false);
//控制弹窗标题
const dialogTitle = ref('新增员工');

/**
 * 新增员工
 */
const beforeAddEmployee = () => {
  dialogVisibleAdd.value = true;
  dialogTitle.value = '新增员工';
}
//批量导入
const mutiAddEmployee = () => {
  dialogVisibleMuti.value = true;
  dialogTitle.value = '批量导入';
}

//关闭弹窗
const handleClose = () => {
  if (confirm('确定要关闭吗?')){
    dialogVisibleAdd.value = false;
    dialogVisibleMuti.value = false;
    saveEmployeeArr.value={};
  }
}

//删除列表
const deleteEmployee = () => {
  if (confirm('确定要删除吗?')){

  }
}

const politicsstatus = ref([]);
const joblevels = ref([]);
const deps = ref([]);
const positions = ref([]);
const nations = ref([]);

const allDeps = ref([]);

const tiptopDegrees = ref( ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他']);

// const initPositions = () =>{
//   this.getRequest('').then(resp => {
//     if (resp) {
//       this.positions = resp;
//     }
//   })
// }

// const initData = () =>{
//   if (!window.sessionStorage.getItem("nations")) {
//     this.getRequest('').then(resp => {
//       if (resp) {
//         this.nations = resp;
//         window.sessionStorage.setItem("nations", JSON.stringify(resp));
//       }
//     })
//   } else {
//     this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
//   }
//   if (!window.sessionStorage.getItem("joblevels")) {
//     this.getRequest('').then(resp => {
//       if (resp) {
//         this.joblevels = resp;
//         window.sessionStorage.setItem("joblevels", JSON.stringify(resp));
//       }
//     })
//   } else {
//     this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"));
//   }
//   if (!window.sessionStorage.getItem("politicsstatus")) {
//     this.getRequest('').then(resp => {
//       if (resp) {
//         this.politicsstatus = resp;
//         window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
//       }
//     })
//   } else {
//     this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));
//   }
//   if (!window.sessionStorage.getItem("deps")) {
//     this.getRequest('').then(resp => {
//       if (resp) {
//         this.allDeps = resp;
//         window.sessionStorage.setItem("deps", JSON.stringify(resp));
//       }
//     })
//   } else {
//     this.allDeps = JSON.parse(window.sessionStorage.getItem("deps"));
//   }
// }

/**
 * 分页
 */
//定义变量保存器的当前页数
const currentPage = ref(1);
//定义每页多少数据
const currentSize = ref(5);
//数据总条数
const total = ref(100);
//修改每一页显示多少条
const handleSizeChange = (val) => {
  console.log('每页展示'+val+'条数据');
  loadEmployee();
}
//修改当前页码
const handleCurrentChange=(val)=>{
  console.log('当前的页数为:'+val);
  loadEmployee();
}

//载入下方查询列表
const loadEmployee=()=>{
  searchArr.value.current=currentPage.value;
  console.log(currentPage.value);
  searchArr.value.size=currentSize.value;
  console.log(currentSize.value);
  let data=qs.stringify(searchArr.value);
  axios.get('/ems/staff/page?'+data,{serviceName:'empService'}).then((response)=>{
    if (response.data.code==2000) {
      ElMessage.success('查询成功');
      console.log('查看page返回的数据');
      console.log(response.data);
      // employeeArr.value = response.data.data;
      employeeArr.value = response.data.data.records;
      total.value=response.data.data.total;
      console.log(total.value);
    }else {
      ElMessage.error(response.data.message);
    }
  })
}
/**
 * 保存员工信息
 */
const saveEmployee = () =>{
  let data=qs.stringify(saveEmployeeArr.value);
  axios.post('/ems/staff/save',data,{serviceName:'empService'}).then((response) =>{
    if (response.data.code==2000) {
      ElMessage.success('保存成功');
      saveEmployeeArr.value = {};
      dialogVisibleAdd.value = false;
      loadEmployee();
    }else {
      ElMessage.error(response.data.message)
    }
  })
}
/**
 * 编辑
 */
const editEmployeeById = (id) =>{
  dialogVisibleAdd.value=true;
  dialogTitle.value='编辑员工信息';
  axios.get('/ems/staff/getInfo/id?='+id,{serviceName:'empService'}).then(response =>{
    if (response.data.code==2000) {
      // saveEmployeeArr.value = response.data.data;
      saveEmployeeArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.message);
    }
  })
}

</script>

<style scoped>
.row-with-margin{
  margin-bottom: 20px;/*设置行间距*/
}
/* From Uiverse.io by Jerome-W-90 */
.modal {
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
}

.logo-circle {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e9e5ff;
  fill: #1cc972;
}

.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.btn-close:hover,
.btn-close:focus {
  background-color: #e9e5ff;
}

.modal-body {
  padding: 1rem 1.5rem;
}

.modal-title {
  font-weight: 700;
}

.modal-description {
  color: #6a6b76;
}

.upload-area {
  margin-top: 1.25rem;
  background-color: transparent;
  padding: 3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed #6a6b76;
}

.upload-area:hover,
.upload-area:focus {
  cursor: pointer;
  border: 1px solid #6a6b76;
}

.upload-area:hover .upload-area-icon,
.upload-area:focus .upload-area-icon {
  transform: scale(1.3);
  transition-duration: 0.3s;
}

.upload-area-icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  fill: #1cc972;
}

.upload-area-title {
  margin-top: 1rem;
  display: block;
  font-weight: 700;
  color: #0d0f21;
}

.upload-area-description {
  display: block;
  color: #6a6b76;
}

.upload-area-description strong {
  color: #1cc972;
  font-weight: 700;
}

.modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.modal-footer [class*="btn-"] {
  margin-left: 0.75rem;
}

.btn-secondary,
.btn-primary {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 2px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #1cc972;
  border-color: #1cc972;
  cursor: pointer;
}

</style>

